<template>
  <div class="app-container">
    <div id="container" style="width:70%;height: 400px"/>
    <!-- 添加或修改岗位对话框 -->
    <span v-if="status==0">正在等待司机接单。。。。。</span>
    <span v-if="status==1">司机已接单
    </span>
    <span>{{nihao}}</span>

  </div>
</template>
<script >
import AMapLoader from "@amap/amap-jsapi-loader";
import store from "@/store";
import goEasy from "goeasy";
export default {
  name: "Post",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      flag: false,
      status:0,
      mapCenter: { lng: 0, lat: 0 },
      mapLocation: {
        index: 0,
        address: '',
        str: '',
        city: '',
        point: {
          lng: 0,
          lat: 0
        }
      },
      // 表单参数
      form: {},
      path:"ws://localhost:9206/websocket/1",
      ws:{},
      message:'',
      startAddress:'',
      endAddress:'',
      nihao:'',
    };
  },
  created() {

  },
  methods: {
    //init函数可在页面加载的时候就进行初始化或者根据自己的业务需求在需要打开通讯的时候在进行初始化
    // init() {
    //   // 实例化socket，这里的实例化直接赋值给this.ws是为了后面可以在其它的函数中也能调用websocket方法，例如：this.ws.close(); 完成通信后关闭WebSocket连接
    //   this.ws = new WebSocket(this.path)
    //   //监听是否连接成功
    //   this.ws.onopen = ()=> {
    //     //连接成功则发送一个数据
    //     this.ws.send('连接成功');
    //     console.log('连接成功');
    //   }
    //
    //   //接听服务器发回的信息并处理展示
    //   this.ws.onmessage = (data)=> {
    //     console.log('接收到来自服务器的消息：');
    //     console.log(data)
    //     this.status=1;
    //   }
    //   //监听连接关闭事件
    //   this.ws.onclose = ()=>{
    //     //监听整个过程中websocket的状态
    //     console.log('连接关闭');
    //   }
    //   //监听并处理error事件
    //   this.ws.onerror = function(error) {
    //     console.log(error);
    //   }
    // },
    initMap() {
      AMapLoader.load({
        key: 'ee4744378fea1c3e7ab81297836d45b7', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 5, // 初始化地图级别
          resizeEnable: true,
          // center: [116.2351, 37.076636] // 初始化地图中心点位置
        })
        const autoOptions = {
          // city 限定城市，默认全国
          city: '北京',
          input: 'start'
        }
        // 实例化AutoComplete
        const autoComplete = new AMap.AutoComplete(autoOptions)
        const autoOptions2 = {
          // city 限定城市，默认全国
          city: '北京',
          input: 'end'
        }
        // 实例化AutoComplete
        const autoComplete2 = new AMap.AutoComplete(autoOptions2)
        // 根据关键字进行搜索
        /* autoComplete.search(this.startName, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
        }) */
      }).catch(e => {
        console.log(e)
      })
    },
    //GoEasy
    init2(){
      const self=this;
      //建立连接
      goEasy.connect({
        onSuccess: function () { //连接成功
          console.log("GoEasy connect successfully.") //连接成功
        },
        onFailed: function (error) { //连接失败
          console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
        }
      });

    //订阅消息
      goEasy.pubsub.subscribe({
        channel: "user_"+store.state.user.id,//替换为您自己的channel

        onMessage: function (message) { //收到消息
          self.updateStatus()
          console.log("Channel:" + message.channel + " content:" + message.content);
          // var content = message.content.pickupLocation;
          // console.log("Channel:" +content );
          const data = JSON.parse(message.content);
          var startAddress = data.pickupLocation;
          var endAddress = data.destination;
          var drivePhoneNumber = data.drivePhoneNumber;
          var driverName = data.driverName;
          var plateNumber = data.plateNumber;
          var model = data.model;
          self.nihao="车牌号"+plateNumber+"车辆型号"+model+"司机名称"+driverName+"联系电话"+drivePhoneNumber
          console.log("vnfvf"+self.nihao);
        },
        onSuccess: function () {
          console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
          console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
        }
      });
    },
    updateStatus(){
      this.status=1;
      console.log("cnlvndvf"+this.status)
    },
  },
  mounted() {
    this.initMap()
    // this.init();
    this.init2();
  }

};
</script>
<style>
/* 设定地图的大小 */
#allmap {
  height: 600px;
  width: 1000px;
  margin: 0 auto;
}
</style>


